<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/detailsPage.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>

<body>
    <div class="main">
        <div class="appbox">
            <div id="app-pc" style="position: static;">
                <!-- 头部
                    logo，搜索
                -->
                <header class="baseHeader">
                    <div class="wrapper">
                        <!-- logo -->
                        <section class="logo">
                            <a href="#" onclick="BackToHome()" title="返回首页">
                                <img src="images/logo.png" alt="logo">
                                <div class="right">
                                    <h3>熊猫优选</h3>
                                    <span>xiongmaoyouxuan</span>
                                </div>
                            </a>
                        </section>
                        <!-- 搜索 -->
                        <section class="wrapper-search">
                            <div class="search">
                                <img src="images/search.png" alt="搜索">
                                <input type="text" placeholder="搜索商品，发现更多优惠">
                                <div class="btn">搜索</div>
                            </div>
                        </section>

                        <!-- 退换，品质，包邮 -->
                        <section class="advantage">
                            <ul>
                                <li>
                                    <img src="images/quanchenbaoyou.png" alt="全程包邮">
                                    <span>全程包邮</span>
                                </li>
                                <li>
                                    <img src="images/qitiantuihuan.png" alt="七天退换">
                                    <span>七天退换</span>
                                </li>
                                <li>
                                    <img src="images/pinzhibaozheng.png" alt="品质保证">
                                    <span>品质保证</span>
                                </li>
                            </ul>
                        </section>
                    </div>
                </header>

                <!-- 导航tab -->
                <div class="tab">
                    <div class="normal">
                        <ul>
                            <li class="active" onclick="BackToHome()">首页</li>
                        </ul>
                    </div>
                </div>


                <!-- 详情页 -->
                <div class="pc-view">
                    <div class="commodity">
                        <!-- 左边详细信息 -->
                        <div class="cmd-info">
                            <!-- 左边图片 -->
                            <div class="photos">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <!-- 动态渲染轮播图 photo-->
                                    </div>

                                    <!-- 如果需要分页器 -->
                                    <div class="swiper-pagination"></div>

                                    <!-- 如果需要导航按钮 -->
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>

                                    <!-- 如果需要滚动条 -->
                                    <!-- <div class="swiper-scrollbar"></div> -->
                                    <span class="swiper-notification"></span>
                                </div>
                            </div>


                            <!-- 左边标题价格 -->
                            <div class="cif-container">
                                <!-- 动态获取左边标题价格描述信息ProductInf -->
                            </div>
                        </div>

                        <!-- 右边卖家信息 -->
                        <div class="shop-info">
                            <div class="sifcontent">
                                <span class="line"></span>
                                <span class="txt">卖家信息</span>
                                <span class="line"></span>
                            </div>

                            <div class="shop-nameandimg">
                                <!-- 动态获取，sellerInfo  -->
                            </div>

                            <div class="shop-score">
                                <ul class="character">
                                    <li>描述</li>
                                    <li>服务</li>
                                    <li>物流</li>
                                </ul>
                                <ul class="score">
                                    <li>4.8</li>
                                    <li>4.8</li>
                                    <li>4.8</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 详细描述图片 -->
                        <div class="cmd-detail">
                            <div class="imgs">
                                <!-- 动态获取 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 回到顶部 -->
                <div class="back-top">
                    <img src="images/Backtotop.png" alt="返回顶部" class="top">
                </div>

                <!-- 底部 -->
                <footer class="footer">
                    <div class="base-footer">
                        <div class="container">
                            <img src="images/20170808-164221.jpeg" alt="底部" class="yx-icon">
                            <div class="ftcontent">
                                <h1 class="fttitle">熊猫优选</h1>
                                <p class="slogan">
                                    年轻人网购首选<br />购物领券更省钱
                                </p>
                            </div>
                            <div class="about-us">
                                <p class="items">
                                    <span class="line">|</span>
                                    <a href="#/download" target="_blank" class="item">下载app</a>
                                </p>
                            </div>
                            <!-- 公安备案 -->
                            <div class="footer">
                                <img src="images/policeIcon.png" alt="公安备案" class="police-icon">
                                <p class="msg">
                                    <span>浙公安网备案 33010602009949号 | </span>
                                    ICP备案号:
                                    <a href="https://beian.miit.gov.cn/"
                                        style="color: rgb(255, 255, 255);">浙ICP备17012864号-1</a>
                                    |
                                </p>
                                <img src="images/license.png" alt="电子营业" class="police-icon">
                                <p class="msg">
                                    <a href="images/license.png" style="color: rgb(255, 255, 255);">证照信息</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>

        <div class="skeleton">
        </div>
    </div>

    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/detail.js"></script>
    <script src="js/public.js"></script>
    <script>
      
    </script>
</body>

</html>